@page "/scheduler/context-menu"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Navigations
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example illustrates how to enable the context menu on Scheduler and perform its related actions based on the selected menu options.</p>
</SampleDescription>
<ActionDescription>
  <p>In this example, we have integrated the ContextMenu control separately from application end and set its target
    to Scheduler control. Also, we have used the public methods <code>OpenEditor</code> through which the default event editor
    is set to open for saving or updating the appointments, <code>DeleteEvent</code> to delete the selected appointment, and
    <code>SelectedDate</code> to navigate to today's date. In mobile devices, the context menu will open when you tap hold on
    the cells or events. </p> 
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.ContextEventsData" @ref="ScheduleRef" Height="650px" @bind-SelectedDate="@SelectedDate">
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView Option="View.Month"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
        <SfContextMenu TValue="MenuItem" @ref="ContextMenuObj" CssClass="schedule-context-menu" Target=".e-schedule">
            <MenuItems>
                <MenuItem Text="New Event" IconCss="e-icons new" Id="Add" Hidden="@isCell"></MenuItem>
                <MenuItem Text="New Recurring Event" IconCss="e-icons recurrence" Hidden="@isCell" Id="AddRecurrence"></MenuItem>
                <MenuItem Text="Today" IconCss="e-icons today" Id="Today" Hidden="@isCell"></MenuItem>
                <MenuItem Text="Edit Event" IconCss="e-icons edit" Id="Save" Hidden="@isEvent"></MenuItem>
                <MenuItem Text="Edit Event" IconCss="e-icons edit" Id="EditRecurrenceEvent" Hidden="@isRecurrence">
                    <MenuItems>
                        <MenuItem Text="Edit Occurrence" Id="EditOccurrence" Hidden="@isRecurrence"></MenuItem>
                        <MenuItem Text="Edit Series" Id="EditSeries" Hidden="@isRecurrence"></MenuItem>
                    </MenuItems>
                </MenuItem>
                <MenuItem Text="Delete Event" IconCss="e-icons delete" Id="Delete" Hidden="@isEvent"></MenuItem>
                <MenuItem Text="Delete Event" IconCss="e-icons delete" Id="DeleteRecurrenceEvent" Hidden="@isRecurrence">
                    <MenuItems>
                        <MenuItem Text="Delete Occurrence" Id="DeleteOccurrence" Hidden="@isRecurrence"></MenuItem>
                        <MenuItem Text="Delete Series" Id="DeleteSeries" Hidden="@isRecurrence"></MenuItem>
                    </MenuItems>
                </MenuItem>
            </MenuItems>
            <MenuEvents TValue="MenuItem" OnOpen="OnOpen" ItemSelected="OnItemSelected"></MenuEvents>
        </SfContextMenu>
    </div>
</div>

@code{
    private DateTime SelectedDate = new DateTime(2020, 1, 8);
    private bool isCell { get; set; }
    private bool isEvent { get; set; }
    private bool isRecurrence { get; set; }
    SfSchedule<ScheduleData.ContextEventsData> ScheduleRef;
    SfContextMenu<MenuItem> ContextMenuObj;
    public ScheduleData.ContextEventsData EventData { get; set; }
    public CellClickEventArgs CellData { get; set; }
    public List<ScheduleData.ContextEventsData> DataSource = new ScheduleData().GetContextEventData();
    public async Task OnOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args)
    {
        if (args.ParentItem == null)
        {
            CellData = await ScheduleRef.GetTargetCellAsync((int)args.Left, (int)args.Top);
            if (CellData == null)
            {
                EventData = await ScheduleRef.GetTargetEventAsync((int)args.Left, (int)args.Top);
                if (EventData.Id == 0)
                {
                   args.Cancel = true;
                }
                if (EventData.RecurrenceRule != null)
                {
                    isCell = isEvent = true;
                    isRecurrence = false;
                }
                else
                {
                    isCell = isRecurrence = true;
                    isEvent = false;
                }
            }
            else
            {
                isCell = false;
                isEvent = isRecurrence = true;
            }
        }
    }
    public async Task OnItemSelected(MenuEventArgs<MenuItem> args)
    {
        var SelectedMenuItem = args.Item.Id;
        var ActiveCellsData = await ScheduleRef.GetSelectedCellsAsync();
        if (ActiveCellsData == null)
        {
            ActiveCellsData = CellData;
        }
        switch (SelectedMenuItem)
        {
            case "Today":
                SelectedDate = DateTime.Now;
                break;

            case "Add":
                await ScheduleRef.OpenEditorAsync(ActiveCellsData, CurrentAction.Add);
                break;

            case "AddRecurrence":
                await ScheduleRef.OpenEditorAsync(ActiveCellsData, CurrentAction.Add, RepeatType.Daily);
                break;

            case "Save":
                await ScheduleRef.OpenEditorAsync(EventData, CurrentAction.Save);
                break;

            case "EditOccurrence":
                await ScheduleRef.OpenEditorAsync(EventData, CurrentAction.EditOccurrence);
                break;

            case "EditSeries":
                List<ScheduleData.ContextEventsData> Events = await ScheduleRef.GetEventsAsync();
                EventData = (ScheduleData.ContextEventsData)Events.Where(data => data.Id == EventData.RecurrenceID).FirstOrDefault();
                await ScheduleRef.OpenEditorAsync(EventData, CurrentAction.EditSeries);
                break;

            case "Delete":
                await ScheduleRef.DeleteEventAsync(EventData);
                break;

            case "DeleteOccurrence":
                await ScheduleRef.DeleteEventAsync(EventData, CurrentAction.DeleteOccurrence);
                break;

            case "DeleteSeries":
                await ScheduleRef.DeleteEventAsync(EventData, CurrentAction.DeleteSeries);
                break;
        }
    }
}

<style>
    .material .schedule-context-menu .e-menu-item .new::before,
    .fabric .schedule-context-menu .e-menu-item .new::before,
    .bootstrap .schedule-context-menu .e-menu-item .new::before,
    .highcontrast .schedule-context-menu .e-menu-item .new::before {
        content: "\e823";
    }

    .bootstrap4 .schedule-context-menu .e-menu-item .new::before {
        content: "\e759";
    }

    .tailwind .schedule-context-menu .e-menu-item .new::before {
        content: "\e78a";
    }

    .material .schedule-context-menu .e-menu-item .recurrence::before,
    .bootstrap .schedule-context-menu .e-menu-item .recurrence::before {
        content: "\e308";
    }

    .fabric .schedule-context-menu .e-menu-item .recurrence::before,
    .highcontrast .schedule-context-menu .e-menu-item .recurrence::before {
        content: "\e309";
    }

    .bootstrap4 .schedule-context-menu .e-menu-item .recurrence::before {
        content: "\e7c8";
    }

    .tailwind .schedule-context-menu .e-menu-item .recurrence::before {
        content: "\e71d";
    }

    .schedule-context-menu .e-menu-item .today::before {
        content: '\e322';
    }

    .highcontrast .schedule-context-menu .e-menu-item .today::before,
    .fabric .schedule-context-menu .e-menu-item .today::before {
        content: '\e321';
    }

    .bootstrap .schedule-context-menu .e-menu-item .today::before {
        content: '\e312';
    }

    .bootstrap4 .schedule-context-menu .e-menu-item .today::before {
        content: '\e7be';
    }

    .tailwind .schedule-context-menu .e-menu-item .today::before {
        content: '\e742';
    }

    .schedule-context-menu .e-menu-item .edit::before {
        content: '\ea9a';
    }

    .bootstrap4 .schedule-context-menu .e-menu-item .edit::before {
        content: '\e78f';
    }

    .tailwind .schedule-context-menu .e-menu-item .edit::before {
        content: '\e7d2';
    }

    .schedule-context-menu .e-menu-item .delete::before {
        content: '\e94a';
    }

    .highcontrast .schedule-context-menu .e-menu-item .delete::before,
    .fabric .schedule-context-menu .e-menu-item .delete::before {
        content: '\eb00';
    }

    .bootstrap4 .schedule-context-menu .e-menu-item .delete::before {
        content: '\e773';
    }

    .tailwind .schedule-context-menu .e-menu-item .delete::before {
        content: '\e78d';
    }
</style>